<template>
    <div>
        <h2>{{ $t('user.preferences.calendar.title') }}</h2>

        <el-form :model="form" label-position="left" label-width="25%" v-loading="loading">
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.calendar.time_format') }}
                    <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.calendar.time_format_tip')" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
                <el-select v-model="form.time_format">
                    <el-option :label="$t('user.preferences.calendar.time_format_default')" value="0" />
                    <el-option :label="$t('user.preferences.calendar.time_format_12')" value="%I:%M %p" />
                    <el-option :label="$t('user.preferences.calendar.time_format_24')" value="%H:%M" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.calendar.week_start') }}
                    <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.calendar.week_start_tip')" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
                <el-select v-model="form.week_start">
                    <el-option value="0" :label="$t('user.preferences.calendar.sun')"></el-option>
                    <el-option value="1" :label="$t('user.preferences.calendar.mon')"></el-option>
                    <el-option value="2" :label="$t('user.preferences.calendar.tue')"></el-option>
                    <el-option value="3" :label="$t('user.preferences.calendar.wed')"></el-option>
                    <el-option value="4" :label="$t('user.preferences.calendar.thu')"></el-option>
                    <el-option value="5" :label="$t('user.preferences.calendar.fri')"></el-option>
                    <el-option value="6" :label="$t('user.preferences.calendar.sat')"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.calendar.max_events') }}
                    <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.calendar.max_events_tip')" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
                <el-select v-model="form.max_events">
                    <el-option :value="day" :label="day" v-for="day in 20"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.calendar.show_days') }}
                    <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.calendar.show_days_tip')" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
                <el-select v-model="form.show_days">
                    <el-option :value="item.value" :label="$t(item.label)" v-for="item in lookaheadList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <template #label>
                    {{ $t('user.preferences.calendar.remember_filters') }}
                    <el-tooltip class="box-item" effect="dark" :content="$t('user.preferences.calendar.remember_filters_tip')" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
                <el-switch v-model="form.remember_filters" :active-text="$t('user.preferences.calendar.yes')" :inactive-text="$t('user.preferences.calendar.no')" />
            </el-form-item>

            <div class="btn-list">
                <el-button @click="submitHandle" color="#F06423">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button @click="cancleHandle" color="#F06423">{{ $t('golbal.btn_text_3') }}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/user'
import UserService from '@/api/user'
import type { CalendarPreference, CalendarPreferencesValue } from '@/types/user'

const key = 'calendar_preferences'
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const lookaheadList = ref([
    { label: 'user.preferences.calendar.lookahead.1y', value: 365 },
    { label: 'user.preferences.calendar.lookahead.9m', value: 270 },
    { label: 'user.preferences.calendar.lookahead.6m', value: 180 },
    { label: 'user.preferences.calendar.lookahead.5m', value: 150 },
    { label: 'user.preferences.calendar.lookahead.4m', value: 120 },
    { label: 'user.preferences.calendar.lookahead.3m', value: 90 },
    { label: 'user.preferences.calendar.lookahead.2m', value: 60 },
    { label: 'user.preferences.calendar.lookahead.1m', value: 30 },
    { label: 'user.preferences.calendar.lookahead.3w', value: 21 },
    { label: 'user.preferences.calendar.lookahead.2w', value: 14 },
    { label: 'user.preferences.calendar.lookahead.1w', value: 7 },
    { label: 'user.preferences.calendar.lookahead.6d', value: 6 },
    { label: 'user.preferences.calendar.lookahead.5d', value: 5 },
    { label: 'user.preferences.calendar.lookahead.4d', value: 4 },
    { label: 'user.preferences.calendar.lookahead.3d', value: 3 },
    { label: 'user.preferences.calendar.lookahead.2d', value: 2 },
    { label: 'user.preferences.calendar.lookahead.1d', value: 1 },
])

const form = ref<CalendarPreferencesValue>({
    time_format: '0',
    week_start: '0',
    max_events: '0',
    show_days: '0',
    remember_filters: '0',
})
const submitHandle = () => {
    loading.value = true
    if (!userStore.userinfoL) return
    UserService.preferenceUpdate(userStore.userinfoL.id, key, form.value).finally(() => {
        loading.value = false
    })
}
const cancleHandle = () => {
    router.go(-1)
}
function getCalendarPreference() {
    if (!userStore.userinfoL) return
    loading.value = true
    UserService.preferenceByKey<CalendarPreference>(userStore.userinfoL.id, key)
        .then(res => {
            form.value = res.value
        })
        .finally(() => {
            loading.value = false
        })
}

watch(
    () => userStore.userinfoL,
    () => {
        getCalendarPreference()
    },
)

onMounted(() => {
    getCalendarPreference()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

:deep(.el-form) {
    .el-form-item {
        .el-form-item__label {
            align-items: center;
            justify-content: space-between;

            color: #4c4c4c;
            line-height: 1.2;
        }
    }

    .btn-list {
        display: flex;
        justify-content: center;
    }
}
</style>
